<template>
  <div class="app-container">
    <h2 style="text-align: center;color: lightgreen">发布课程信息</h2>

    <el-steps :active="1" finish-status="success" align-center>
      <el-step title="添加课程的基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程名称">
        <el-input v-model="courseInfo.title" placeholder="示例：机器学习"></el-input>
      </el-form-item>
      <!--课程讲师-->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="item in teacherList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--课程分类-->
      <el-form-item label="课程分类">
        <!--一级分类-->
        <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectOneChange">
          <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id">
          </el-option>
        </el-select>
        <!--二级分类-->
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id">
          </el-option>
        </el-select>

      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right"></el-input-number>
      </el-form-item>
      <!--导入文本编辑器组件-->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"></tinymce>
      </el-form-item>
      <el-form-item label="价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right"></el-input-number>
      </el-form-item>

      <el-form-item label="上传封面">
        <el-upload
          class="upload-demo"
          :action="BASE_API + '/oss/file/upload'"
          :show-file-list="false"
          auto-upload
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
        >
          <img :src="courseInfo.cover" width="400px" alt="">
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveAndUpdate">保存下一步</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import courseApi from '@/api/edu/course'
  import subjectApi from '@/api/edu/subject'
  import Tinymce from '@/components/Tinymce'

  export default {
    components: { Tinymce },
    name: 'info',
    data() {
      return {
        //上传的课程的信息
        courseInfo: {
          title: '',
          //二级分类
          subjectId: '',
          //一级分类
          subjectParentId: '',
          teacherId: '',
          lessonNum: 0,
          description: '',
          price: 0,
          cover: '/static/timg.jpg'
        },

        //讲师列表
        teacherList: [],

        //一级分类
        subjectOneList: [],
        //二级分类
        subjectTwoList: [],

        BASE_API: process.env.BASE_API,

        //表单数据回显时路由参数传递的课程Id
        courseId: ''
      }
    },

    async created() {
      //获取路由中的课程Id值
      if (this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id
        this.getCourseInfoByCourseId()
      } else {
        //初始化所有讲师
        this.getTeacherList()
        //初始化一级分类
        this.getSubjectList()
      }
    },

    //需要在数据回显时再次点击导航栏时，刷新掉原来的数据
    //这里使用mounted不行
    watch() {
      if (!(this.$route.params && this.$route.params.id)) {
        this.courseInfo = { lessonNum: 0, price: 0, cover: '/static/timg.jpg' }
      }
    },

    methods: {
      async saveAndUpdate() {
        if (!this.courseId) {
          //添加
          const {data} = await courseApi.addCourseInfo(this.courseInfo)
          this.$message.success('添加课程信息成功')
          //跳转到第二步
          this.$router.push('/course/chapter/' + data.courseId)
        }else {
          await courseApi.updateCourseInfo(this.courseInfo)
          this.$message.success('修改课程信息成功')
          //跳转，这里是添加实现，需要携带的是回显时的courseId
          this.$router.push('/course/chapter/' + this.courseId)
        }

      },

      //用于表单的数据回显
      async getCourseInfoByCourseId() {
        const { data } = await courseApi.getCourseInfo(this.courseId)
        //回显的课程所有的信息
        this.courseInfo = data.data
        //初始化所有讲师
        this.getTeacherList()
        //初始化一级分类
        const { data: res } = await subjectApi.getSubjectListPage()
        //获取一级分类以及一级分类对应的二级分类，方便回显而不是直接显示数据
        this.subjectOneList = res.data
        for (let i = 0; i < this.subjectOneList.length; i++) {
          let oneSubject = this.subjectOneList[i]
          if (this.courseInfo.subjectParentId === oneSubject.id) {
            this.subjectTwoList = oneSubject.children
          }
        }
      },

      //查询所有的讲师
      async getTeacherList() {
        const { data } = await courseApi.getAllTeacher()
        this.teacherList = data.data
      },

      async getSubjectList() {
        const { data } = await subjectApi.getSubjectListPage()
        this.subjectOneList = data.data
      },

      //点击某个一级分类触发change事件
      subjectOneChange(value) {
        for (let i = 0; i < this.subjectOneList.length; i++) {
          let oneSubject = this.subjectOneList[i]
          //如果选中的id等于一级分类中的id，则给对应的二级分类赋值
          if (value === oneSubject.id) {
            this.subjectTwoList = oneSubject.children
            this.courseInfo.subjectId = ''
          }
        }
      },
      //上传封面成功后调用的方法
      uploadSuccess(res, file) {
        this.courseInfo.cover = res.data.url
      },

      //上传封面之前调用的方法
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpg' || 'image/JPG'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传的照片只能是JPG格式')
        }
        if (!isLt2M) {
          this.$message.error('上传的照片大小不能超过2M')
        }
        return isLt2M && isLt2M
      }
    }
  }
</script>

<style scoped>
  .el-form {
    margin-top: 20px;
  }

  .tinymce-container {
    line-height: 29px;
  }

</style>
